<template>
  <div class="content">
    <headnav></headnav>
    <el-container class="maincon">
      <el-aside class="asides">
      <div class="header">
        <span>数据连接</span>
        <el-button style="float: right;margin: 8px;" type="primary" @click="addDataLink()">添加连接</el-button>
      </div>
      <div class="search">
       <el-input placeholder="请输入内容" v-model="searchname" class="input-with-select">
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option v-for="(item,index) in dataTypeList" :key="index" :label="item.name" :value="item.value"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="searchSql(select,searchname)"></el-button>
      </el-input>
      </div>
      <ul class="datalist">
        <li v-for="(item,index) in list" :key="index" :class="sideactive==index?'sideactive':''" @click="listwacth(item,index)">
          <span class="icon"> <img :src="item.imgsrc" alt=""></span>{{item.conName}}
        </li>
      </ul>
    </el-aside>
    <el-main>
      <router-view>
      </router-view>
    </el-main>
    </el-container>
    <el-dialog title="添加数据连接" :visible.sync="dialoglink">
      <ul class="imglist">
         <li v-for="(item,index) in imglist" :key="index" @click="addData(item)">
              <div class="children">
                  <div class="imgs" :class="item.class">
                          <img :src="item.imgsrc" alt="">
                      </div>
                      <p class="txt">{{item.txt}}</p>
              </div>
          </li>
                <!-- <li >
                    <div class="children">
                        <div class="imgs excelbcolor">
                                <img src="../../static/image/excelimg.png" alt="">
                            </div>
                            <p class="txt">Excel</p>
                    </div>
                </li>
                <li>
                    <div class="children">
                            <div class="imgs csvbcolor">
                                    <img src="../../static/image/csv.png" alt="">
                                </div>
                                <p class="txt">CSV</p>
                        </div>
                </li>
                <li>
                    <div class="children">
                        <div class="imgs mysqlbcolor">
                            <img src="../../static/image/mysqlicon.png" alt="">
                        </div>
                            <p class="txt">MySql</p>
                    </div>
                </li>
                <li>
                    <div class="children">
                        <div class="imgs oraclebcolor">
                            <img src="../../static/image/oracle.png" alt="">
                        </div>
                        <p class="txt">Oracle</p>
                    </div>
                </li>
                <li>
                    <div class="children">
                        <div class="imgs hivebcolor">
                            <img src="../../static/image/Hive.png" alt="">
                        </div>
                        <p class="txt">Hive</p>
                    </div>
                </li>
                <li>
                    <div class="children">
                        <div class="imgs txtbcolor">
                            <img src="../../static/image/txt.png" alt="">
                        </div>
                        <p class="txt">Txt</p>
                    </div>
                </li> -->
            </ul>
    </el-dialog>
    
   </div>
</template>

<script>
import {getlinklist} from "@/api/datalink"
import headnav from '@/components/HeadNav'
export default {
  name: 'HelloWorld',
  components:{
    headnav
  },
  data () {
    return {
      dialoglink:false,
      searchname:"",
      select:"",
      sideactive:0,
      req:{
        pageSize: 10,
        pageNum: 1
      },
      dataType:"1",
      formType:{},
      dataTypeList:[
        {
          name:"excel",
          value:"excel"
        },
         {
          name:"txt",
          value:"txt"
        },
        {
          name:"oracle",
          value:"oracle"
        },
        {
          name:"csv",
          value:"csv"
        },
        {
          name:"mysql",
          value:"mysql"
        },
      ],
      imglist:[
        {
          class:"excelbcolor",
          imgsrc:require("../../static/image/excelimg.png"),
          txt:"excel"
        },
        {
          class:"csvbcolor",
          imgsrc:require("../../static/image/csv.png"),
          txt:"csv"
        },
        {
          class:"mysqlbcolor",
          imgsrc:require("../../static/image/mysqlicon.png"),
          txt:"mysql"
        },
        {
          class:"oraclebcolor",
          imgsrc:require("../../static/image/oracle.png"),
          txt:"oracle"
        },
        {
          class:"hivebcolor",
          imgsrc:require("../../static/image/Hive.png"),
          txt:"hive"
        },
        {
          class:"txtbcolor",
          imgsrc:require("../../static/image/txt.png"),
          txt:"txt"
        },
      ],
      list:[
        {
          id:'1',
          conName:"默认数据",
          conType:'excel',
          imgsrc:require("../../static/image/excelimg.png")
        },
        {
          id:'2',
          conName:"mysql",
          conType:'mysql',
          imgsrc:require("../../static/image/mysqlicon.png")
        }
        ,
        {
          id:'3',
          conName:"oracle",
          conType:'oracle',
          imgsrc:require("../../static/image/oracle.png")
        }
        ,
        {
          id:'4',
          conName:"csv",
          conType:'csv',
          imgsrc:require("../../static/image/csv.png")
        }
        ,
        {
          id:'5',
          conName:"txt",
          conType:'txt',
          imgsrc:require("../../static/image/txt.png")
        }
        ,
        {
          id:'6',
          conName:"hive",
          conType:'hive',
          imgsrc:require("../../static/image/Hive.png")
        }
      ],
     
      
     
    }
  },
   mounted(){
     this.linklist(this.req);
     this.linklist(this.$route.query.type)
  },
  watch:{
          // "$route": "routeLoad",
          // formType:function(curVal,oldVal){
          // console.log(curVal);
          // this.$router.push({path:"/datalink/baselink",query:{basedata:curVal}})
          // },
          // deep: true,   
        },
  methods:{
    searchSql(select,searchname){
      console.log(select,searchname);
      this.req.conName=searchname;
      this.req.conType=select;
      this.linklist(this.req)
    },
    // routeLoad(){
    //    this.$router.push({path:"/datalink/baselink",query:{basedata:this.$store.state.formType}})
    // },
    //获取数据连接

    linklist(req){
      getlinklist(req).then(res=>{
        if(res){
          console.log(res)
          let lists=res.data.results.list;
           lists.forEach(item=>{
             switch(item.conType){
                case 'mysql':
                item.imgsrc=require("../../static/image/mysqlicon.png");
                break;
                case 'oracle':
                item.imgsrc=require("../../static/image/oracle.png");
                break;
                case 'txt':
                item.imgsrc=require("../../static/image/txt.png");
                break;
                case 'hive':
                item.imgsrc=require("../../static/image/Hive.png");
                break;
                case 'csv':
                item.imgsrc=require("../../static/image/csv.png");
                break;
                case 'excel':
                item.imgsrc=require("../../static/image/excelimg.png");
                break;
             }
           })
           console.log(lists);
           this.list=lists;
        }
      }).catch(error=>{

      })
    },
    addDataLink(){
      this.dialoglink=true;
    },
    addData(item){
      console.log(item);
      let listli={
          id:'',
          conName:'未命名',
          conType:item.txt,
          imgsrc:item.imgsrc
        }
      this.list.push(listli);
      this.listwacth(listli)
      this.dialoglink=false;
    },
     listwacth(item,index){
       this.sideactive=index;
       this.$store.commit('changetype',item);
       this.$store.commit('changetab',{isSuccess:false,tabindex:0});
       this.$router.push({path:"/datalink/baselink/"+item.conType,query:{sqlType:item.conType,sqlId:item.id,activenavIndex:'1'}})
     },
     
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content{
  height: 90%;
}
.maincon{
height: 100%;
}
.asides{
  border-right:1px solid #ddd;
  height:100%;
  
}
.el-select  {
    width: 90px;
  }
.header{
  height: 60px;
  line-height: 60px;
  padding: 8px;
}
.search{
  padding:0 8px;
}
.datalist{
  padding: 10px 0px;
}
.datalist li{
  padding: 10px 8px; 
}
/* .datalist li:hover{
  border-radius: 2px;
  background: #3a8ee6;
  color: white;
} */
.sideactive{
  border-radius: 2px;
  background: #3a8ee6;
  color: white;
}
.imglist{
    display: flex;
    display: -webkit-flex;
    flex-flow: row wrap;
    flex-wrap: wrap;
    align-content: flex-start;
}
.imglist li{
    box-sizing: border-box;
    flex: 0 0 25%;
    text-align: center;
    
    padding: 8px;
}
.children{
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2)
}
.excelbcolor{
    background: #5FB878;
}
.csvbcolor{
    background: #5EC429;
}
.mysqlbcolor{
    background: #5E9CBD;
}
.oraclebcolor{
    background: #D4452C;
}
.hivebcolor{
    background: #FFF24E;
}
.txtbcolor{
    background: rgb(29, 173, 192);
}
.imgs{
    padding: 12px;
}
.children .txt{
    height: 30px;
    line-height: 30px
}
.imgs img{
    width: 64px;
    
}
.icon{
  display: inline-block;
  background: #5FB878;
  margin: 0 8px;
}
.icon img{
    width: 16px;
    vertical-align: middle;
    padding: 4px;
}

</style>
